<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>在线拿牙签比拼</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<style style="text/css">
		@font-face{
			font-family: test;
			src:url("./王汉宗中行书繁.ttf");
		}
		/*页面所有字体居中*/
		*{
			text-align: center;
			font-family: test;
			font-size: 25px;
		}

		/*牙签二字居住*/
		th{
			text-align: center;
		}

		/*鼠标停留变色*/
		/*th:hover{
			background-color:#ccc9c9;
		}*/

		/*点击变色*/
		.over {background-color: red;}
		.down {background-color: #999;}
	</style>
</head>
<body>
	<table class="table table-bordered text-center">
		<h1>拿牙签游戏</h1>
		<thead>
			<tr id="tr1">
				<th align="middle" bgcolor="#fefef5" class="noball" onclick="chg(this); ">牙签</th>
				<th align="middle" bgcolor="#fefef5" class="noball" onclick="chg(this); ">牙签</th>
				<th align="middle" bgcolor="#fefef5" class="noball" onclick="chg(this); ">牙签</th>
			</tr>
		</thead>
		<tbody>
			<tr id="tr2">
				<th align="middle" bgcolor="#fefef5" class="noball" onclick="chg(this); ">牙签</th>
				<th align="middle" bgcolor="#fefef5" class="noball" onclick="chg(this); ">牙签</th>
				<th align="middle" bgcolor="#fefef5" class="noball" onclick="chg(this); ">牙签</th>
				<th align="middle" bgcolor="#fefef5" class="noball" onclick="chg(this); ">牙签</th>
				<th align="middle" bgcolor="#fefef5" class="noball" onclick="chg(this); ">牙签</th>
			</tr>
			<tr id="tr3">
				<th align="middle" bgcolor="#fefef5" class="noball" onclick="chg(this); ">牙签</th>
				<th align="middle" bgcolor="#fefef5" class="noball" onclick="chg(this); ">牙签</th>
				<th align="middle" bgcolor="#fefef5" class="noball" onclick="chg(this); ">牙签</th>
				<th align="middle" bgcolor="#fefef5" class="noball" onclick="chg(this); ">牙签</th>
				<th align="middle" bgcolor="#fefef5" class="noball" onclick="chg(this); ">牙签</th>
				<th align="middle" bgcolor="#fefef5" class="noball" onclick="chg(this); ">牙签</th>
				<th align="middle" bgcolor="#fefef5" class="noball" onclick="chg(this); ">牙签</th>
			</tr>
		</tbody>
	</table>
	<h3>游戏规则：</h3>
		<p>分成三行每行自上而下（其实方向不限）分别是3、5、7根</p>
		<p>安排两个玩家，每人可以在一轮内，在任意行拿任意根牙签，但不能跨行拿最后一根牙签的人即为输家</p>
	<div class="container">  
		<button  type="button" class="btn btn-primary" id="myButton1" 
		data-complete-text="Loading finished" onclick="play()">开始</button>
		<button  type="button" class="btn btn-primary" id="myButton2" 
		data-complete-text="Loading finished">确定拿这些牙签</button>
		<button  type="button" class="btn btn-primary" id="myButton3" 
		data-complete-text="Loading finished">重来一次</button>
	</div>
	<div class="jumbotron text-center" style="margin-bottom:0">
		<div class="row">
		  <div class="col-md-12 text-left">
		  	第1回合：甲- <span id="one1"></span>           乙-<span id="one2"></span>
		  </div>
		</div>
		<div class="row">
		  <div class="col-md-12 text-left">
		  	第2回合：甲- <span id="two1"></span>           乙-<span id="two2"></span>
		  </div>
		</div>
		<div class="row">
		  <div class="col-md-12 text-left">
		  	第3回合：甲- <span id="three1"></span>           乙-<span id="three2"></span>
		  </div>
		</div>
	</div>
	<script style="text/javascript">
		function chg(obj){
			if(obj.className != "over"){
                          obj.oldClass = obj.className; // 更改原来的class，用于恢复
                          obj.className = "over";
                      }else if(obj.oldClass){
                              obj.className = obj.oldClass; // 还原原来的class，用于恢复
                          }
                      }
// .............................................................
// 按钮-----开始
$("#myButton1").click(function(){
            // 动作触发后执行的代码!!
            alert("游戏已开始")
            
        });
// .............................................................
// 按钮-----确定拿这些牙签
var a=1;
var b=1;
var c=1;
var d=a+b;
var e=a+b+c;
$("#myButton2").click(function(){
	        // 声明
	        $("#one1").html(e)
	        alert("已经拿了这些牙签！") 
            // 动作触发后执行的代码!!
            // if(){
            //   alert("你输了");	
            // }else(){
            //   alert("你赢了");
            // }    
        });

// .............................................................
// 按钮-----重来一次
$("#myButton3").click(function(){
            // 动作触发后执行的代码!!
            $(window).attr('location','index.html');
            alert("你已经重新开局了，刚刚还没输！");
        });
    </script>
</body>
</html>